<template>
  <BasicModal
    @register="registerModal"
    v-bind="$attrs"
    destroy-on-close
    title="编辑费率"
    width="800px"
  >
    <BasicTable v-if="type == 0" @register="register" @edit-end="onEditEndFunc">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'type'">
          {{ record.type === '0' ? '手动' : record.type === '1' ? '自动' : '第三方' }}
        </template>
      </template>
    </BasicTable>
    <BasicTable v-if="type == 1" @register="registerPay" @edit-end="onEditEndPayFunc">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'type'">
          {{ record.type === '0' ? '手动' : record.type === '1' ? '自动' : '第三方' }}
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTable, useTable } from '@/components/Table';
  import { GetRateApi, EditRateApi, EditRatePayApi } from '@/api/group';
  import { GetPaymentApi } from '@/api/payment';
  import message from '@/views/form-design/utils/message';

  const id = ref('');
  const type = ref();
  const [registerModal] = useModalInner((data) => {
    id.value = data.id;
    type.value = data.type;
  });
  const [register, { reload }] = useTable({
    title: '代收费率',
    bordered: true,
    striped: true,
    inset: false,
    api: GetRateApi,
    beforeFetch: (params) => {
      params['id'] = id.value;
    },
    afterFetch: (data) => {
      data.forEach((item) => {
        item.rate_edit = item.rate;
      });
      return data;
    },
    columns: [
      {
        title: '模板名称',
        dataIndex: 'templateTitle',
      },
      {
        title: '通道名称',
        dataIndex: 'title',
      },
      {
        title: '当前费率',
        dataIndex: 'rate',
      },
      {
        title: '编辑费率',
        dataIndex: 'rate_edit',
        edit: true,
        editComponentProps: {
          placeholder: '请输入费率',
        },
        editComponent: 'InputNumber',
      },
      {
        title: '操作类型',
        dataIndex: 'type',
      },
    ],
    rowKey: 'code',
  });
  const [registerPay, { reload: reloadPay }] = useTable({
    title: '代付费率',
    bordered: true,
    striped: true,
    inset: false,
    api: GetPaymentApi,
    beforeFetch: (params) => {
      params['id'] = id.value;
    },
    afterFetch: (data) => {
      data.forEach((item) => {
        item.rate_edit = item.rate;
      });
      return data;
    },
    columns: [
      {
        title: '模板名称',
        dataIndex: 'templateTitle',
      },
      {
        title: '通道名称',
        dataIndex: 'title',
      },
      {
        title: '当前费率',
        dataIndex: 'rate',
      },
      {
        title: '编辑费率',
        dataIndex: 'rate',
        edit: true,
        editComponentProps: {
          placeholder: '请输入费率',
        },
        editComponent: 'InputNumber',
      },
      {
        title: '操作类型',
        dataIndex: 'type',
      },
    ],
    rowKey: 'code',
  });

  const onEditEndFunc = ({ record, value }) => {
    EditRateApi({ code: record.code, rate: value, agentId: id.value }).then(() => {
      message.success('修改成功');
      reload();
    });
  };
  const onEditEndPayFunc = ({ record, value }) => {
    EditRatePayApi({ code: record.code, rate: value, agentId: record.agentId }).then(() => {
      message.success('修改成功');
      reloadPay();
    });
  };
</script>
